<template>
  <ul class="menu" v-show="showMenu" :style="style">
  	<li class="remove" v-text="lang.remove" @mousedown="delNode(nodeId, nodeIdx)"></li>
  	<li class="setting" v-text="lang.setting" @mousedown="settingNode"></li>
  	<li class="cancel" v-text="lang.cancel"></li>
  </ul>
</template>

<script>
  import language from './js/lang/smtflow.i18n.zh-cn'
  export default {
    name: 'FlowMenu',
    props: ['delNode', 'onSettingNode'],
    data() {
      return {
        lang: language.menu,
        showMenu: false,
        style: {},
        nodeIdx: -1,
        nodeId: null,
        nodeType: ''
      }
    },
    methods: {
      setMenu(node, style) {
        this.showMenu = !!node;
        this.style = style || {};
        if(node) {
          this.nodeIdx = node.idx;
          this.nodeId = node.nodeId;
          this.nodeType = node.type;
        }
        else {
          this.nodeIdx = -1;
          this.nodeId = null;
          this.nodeType = '';
        }
      },
      settingNode() {
        if(this.onSettingNode) {          
          window.setTimeout(()=>{
            this.onSettingNode(this.nodeId, this.nodeType)
          },0)
        }
      }
    }
  }
</script>

<style scoped>
  ul.menu {
    position: fixed;
    width: 100px;
    background-color: #d2e1f0;
    border: #99bbe8 1px solid;
    box-shadow: 3px 3px 3px #999999;
    list-style-type: none;
    box-sizing: border-box;
    line-height: 18px;
    font-size: 14px;
    padding-left: 8px;
    margin: 0;
    z-index: 2000;
  }
  ul.menu > li {
    padding: 5px 0px 5px 22px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center left;
    background-origin: padding-box;
    border-bottom: 1px dotted #ccc;
    text-align: left;
  }
  ul.menu > li.remove {
    background-image: url(./css/img/menu-remove.svg);
  }
  ul.menu > li.setting {
    background-image: url(./css/img/menu-setting.svg);
  }
  ul.menu > li.cancel {
    background-image: url(./css/img/menu-cancel.svg);
  }
  ul.menu > li:hover {
    cursor: pointer;
    text-shadow: #B3BA5C 0px 0;
  }
</style>
